<template>
	<div class="myInfo">
        <div class="title">
           <span>邀请码</span>
           <button type="button" @click="upBoxBtn = true;" v-if="userType!='TWO'">添加邀请码</button>
        </div>

        <div class="up_box" @click.stop="upBoxBtn=false;" v-if="upBoxBtn">
            <div class="up_inner_box position-middle-center" @click.stop="">
                <div class="top">
                    <span class="up_title">添加邀请码</span>
                    <span class="close" @click.stop="upBoxBtn=false;">&times;</span>
                </div>
                <div class="text_box">
                    <div class="item">
                        <span class="name"><i>*</i>电话</span>
                        <input type="text" placeholder="请输入邀请人电话号码" v-model="addMobile">
                    </div>
                </div>
                <div class="btn">
                    <button class="cancle" @click="upBoxBtn=false;">取消</button>
                    <button class="sure" @click="addCodeFn">保存</button>
                </div>
            </div>
        </div>

        <div class="up_box" @click.stop="changeForPhoneBox=false;" v-if="changeForPhoneBox">
            <div class="up_inner_box position-middle-center" @click.stop="">
                <div class="top">
                    <span class="up_title">修改当前用户推广次数</span>
                    <span class="close" @click.stop="changeForPhoneBox=false;">&times;</span>
                </div>
                <div class="text_box">
                    <p class="item">手机号：{{nowChangeItem.phone}}</p>
                    <p class="item">推广码：{{nowChangeItem.code}}</p>
                    <div class="item">
                        <span class="name"><i>*</i>次数</span>
                        <input type="text" placeholder="请输入推广次数" v-model="nowChangeItem.count">
                    </div>
                </div>
                <div class="btn">
                    <button class="cancle" @click="changeForPhoneBox=false;">取消</button>
                    <button class="sure" @click="updateCountForPhone(nowChangeItem)">保存</button>
                </div>
            </div>
        </div>

        <div class="info_box">
            <div class="my_self flex flex-align-center">
                <span class="name" v-text="myCode"></span>
                <span class="name" style="color:red;" v-text="'(剩余推广次数：'+myMsg.count+')'"></span>
                <!-- <span class="superior_name" v-text="rootCode?('上级：'+rootCode):''"></span> -->
            </div>
            <div v-if="!myList.length && initBtn">暂无！</div>
            <div class="ulBox" id="ulBox">
                <ul class="uls" id="uls">
                    <li class="li2 clearfix" v-for="(item,ind) in myList" @click.stop="changeCountForPhone(item)" :key="ind">
                        <div class="name left">
                            <span v-text="((curPage-1)*pageSize+(ind+1))+'，'"></span><span v-text="item.code+'（'+(item.name?item.name+',':'')+item.mobile+'）'"></span>
                        </div>
                        <div class="handle_status right">
                            <span @click="forbadeFn(item)" :style="{color:(item.status=='已启用'?'#c97070':'#82c971')}" v-text="item.status=='已启用'?'禁用':'启用'"></span>
                        </div>
                        <div class="status right">
                            <span v-text="item.status" :style="{color:(item.status=='已启用'?'#82c971':'#c97070'), borderColor:(item.status=='已启用'?'#82c971':'#c97070')}">已启用</span>
                        </div>
                        <div class="count-set right" v-if="nowIsPhone?false:true">
                            <span>剩余推广次数:</span>
                            <span class="count">{{item.count}}</span>
                            <span class="set" @click="nowIndex=ind;canUpdate=true;myList[ind].isChange=true" v-if="!item.isChange">修改</span>
                            <span v-else>
                                <input type="text" name="count" class="count-inp" v-model="refCount"/>
                                <span class="set" @click="updateCount(item);canUpdate=false;item.isChange=false">确定</span>
                                <span class="set" @click="canUpdate=false;item.isChange=false;refCount=0">取消</span>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="pager flex flex-align-center" id="pager">
            <div class="pagerCon clearfix">
                <div class="pagerBtnBox right">
                    <div class="pagerBtn">
                        <span class="prev flex flex-align-center flex-pack-center left" :class="{havePage:curPage>1}"><i class="el-icon-arrow-left" @click="curPageFn(2)"></i></span>
                        <span class="curPageNumber flex flex-align-center flex-pack-center left">{{curPage}}</span>
                        <span class="next flex flex-align-center flex-pack-center left" :class="{havePage:curPage<codeInfo.totalPages}"><i class="el-icon-arrow-right" @click="curPageFn(1)"></i></span>
                    </div>
                </div>
                <div class="curPage flex flex-align-center right" v-text="'第'+curPage+'/'+(codeInfo.totalPages)+'页'"></div>
                <div class="totalPage flex flex-align-center right" v-text="'共' +codeInfo.totalElements+ '条'"></div>
            </div>
        </div>
	</div>
</template>

<script>
export default {
  	data(){
  		return {
            nowChangeItem:{
                phone:'',
                code:'',
                count:0
            },
            changeForPhoneBox:false,
            refCount:0,  
            nowIndex:0,//当前选择的索引
            canUpdate:false,
            addMobile:'',//被邀请人电话
            upBoxBtn:false,//添加邀请码弹出框按钮
            myList:[],//邀请码数据列表
            myCode:'',//我的邀请码
            rootCode:'',//上级
            userType:'',//用户等级

            initBtn: false,

            codeInfo: {
                totalPages: 0,
                totalElements: 0,
            }, // 邀请码信息
            curPage: 1, 
            pageSize: 10,
            nowIsPhone:false,
            myMsg: {
                "amount": 0,
                "storeCount": 0,
                "codeCount": 0,
                "referralCode": "",
                "name": "",
                "bankName": "",
                "idCardNo": "",
                "bankCardNo": "",
                "mobile": ""
            }, // 我的信息
  		}
  	},
    methods:{
        getMyMsg: function () {
            this.$http.get("profile").then((res)=>{
                this.myMsg = res.data;
                // this.initBtn = true;
            }).catch((err)=>{

            })
        },
        updateCountForPhone(item){
            this.$http({
                url:"updateCode",
                method:"GET",
                params:{
                  count:item.count,
                  refCode:item.code
                }
            }).then(res=>{
                console.log(res);
                if(res.status === 200 && res.data=="修改成功"){
                    this.$message.success({
                        message: res.data,
                        type: 'success',
                    });
                    this.refCount = 0;
                }
                this.getCodeList();
                this.changeForPhoneBox = false;
            });
        },
        changeCountForPhone(item){
            if(!this.nowIsPhone){
                return;
            }else{
                this.changeForPhoneBox = true;
                let obj = {
                    phone:item.mobile,
                    code:item.code,
                    count:item.count
                }
                this.nowChangeItem = obj;
            }
        },
        updateCount(item){
            this.$http({
                url:"updateCode",
                method:"GET",
                params:{
                  count:this.refCount,
                  refCode:item.code
                }
            }).then(res=>{
                console.log(res);
                if(res.status === 200 && res.data=="修改成功"){
                    this.$message.success({
                        message: res.data,
                        type: 'success',
                    });
                    this.refCount = 0;
                }
                this.getCodeList();
            });
        },
        //获取邀请码列表
        getCodeList(){
            this.$http.get("my-referral-codes?page="+(this.curPage-1)+"&size="+this.pageSize).then((res)=>{
                this.myList = [];
                this.codeInfo = res.data;
                this.myCode = res.data.myCode;
                this.rootCode = res.data.rootCode;
                let myList = res.data.myList;
                for(let i=0;i<myList.length;i++){
                    let obj={
                        code: myList[i].code,
                        count: myList[i].count,
                        mobile: myList[i].mobile,
                        name: myList[i].name,
                        status: myList[i].status,
                        isChange:false
                    }
                    this.myList.push(obj);
                }
                this.initBtn = true;
            })    
        },
        //添加邀请码
        addCodeFn(){
            if ( !(/^1[3|4|5|7|8][0-9]{9}$/.test(this.addMobile)))  {
                this.$message.error({
                    message: "请输入正确电话号码",
                    type: 'error',
                });
                return;
            }
            this.$http.post('my-referral-codes',this.addMobile).then((res)=>{
                this.upBoxBtn =false;
                this.addMobile = '';
                this.$message.success({
                    message: "添加成功",
                    type: 'success',
                });
                this.getCodeList() 
            })
        },
        //切换页码
        curPageFn(foo){
            if(this.codeInfo.totalPages<=1){
                return;
            }
            if(foo==2){
                if( this.curPage==1 ){
                    return;
                }
                this.curPage --;
            }else if(foo==1) {
                if( this.curPage==this.codeInfo.totalPages ){
                    return;
                }
                this.curPage ++;
            }
            this.getCodeList();
        },
        //启用/禁止
        forbadeFn(item){
            let status = (item.status=='已启用'?false:true);
            this.$http.put('my-referral-codes/'+item.code+'?enabled='+status).then((res)=>{
                this.$message.success({
                    message: "修改成功",
                    type: 'success',
                });
                this.getCodeList();
            })
        },
        //返回true表示为手机端打开，返回false表示为pc端打开
        isPhone(){
            var userAgentInfo=window.navigator.userAgent;
            var Agents =new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"); 
            var flag=false; 
            for(var v=0;v<Agents.length;v++) { 
                if(userAgentInfo.indexOf(Agents[v])>0) { 
                flag=true; 
                break; 
                } 
            } 
            return flag; 
        }
    },
    created: function () {
        this.userType = localStorage.getItem('userType');
        this.getCodeList();
    },
    mounted(){
        this.nowIsPhone = this.isPhone();
        this.getMyMsg();
        if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            // this.$createScroll('ulBox');
        }
        // this.$http({
        //     url:'reduce/refCode',
        //     method:"POST",
        //     data:{
        //         refCode:'hxbs944186'
        //     }
        // }).then(res=>{
        //     console.log(res)
        // })
  	}
}
</script>
<style lang="scss" scoped>
	@import "code";
</style>
